<template>
  <div>
    <el-dialog class="abow_dialog"
               :visible.sync="centerDialogVisible"
               center
               :title="title">
      <div style="color:darkorange;text-align: right;margin: auto; width: max-content; max-height: 100%">
        <br />
        用户名：<el-input v-model="in_userName"
                  class="input3"
                  placeholder="用户名"
                  style="width: 200px"></el-input>
        <br />
        用户职位： <template>
          <el-select v-model="in_userJob"
                     class="input3"
                     clearable
                     style="width: 200px;"
                     placeholder="类型">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </template>
        <br /> <br />
        <div style="text-align: center;">
          <el-button class="botton"
                     @click="centerDialogVisible = false">取 消</el-button>
          <el-button class="botton"
                     @click="insertUser()">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <div style="color: darkorange; font-size: small; height: 30px">
      <el-input v-model="to_account"
                class="input"
                placeholder="账号"
                style="width: 100px"></el-input>&nbsp;
      <el-input v-model="to_name"
                class="input"
                placeholder="用户名"
                style="width: 100px"></el-input>&nbsp;
      <template>
        <el-select v-model="to_job"
                   @change="load()"
                   class="input"
                   clearable
                   style="width: 100px;"
                   placeholder="职位">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </template>&nbsp;
      <el-button class="botton"
                 @click="load()">搜索</el-button>
      <el-button class="botton"
                 @click="insert()">新增<i class="el-icon-circle-plus"></i></el-button>
      <el-button class="botton"
                 @click="multipleDelete()">批量删除<i class="el-icon-remove-outline"></i></el-button>
    </div>
    <div style="margin-top: 8px; margin-bottom: 15px"></div>
    <div class="big">
      <el-table :data="tableData"
                :row-style="{ color: 'darkorange', height: '60px' }"
                border
                fit
                style="width: 100%"
                @selection-change="HandleSelectChange">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column sortable
                         label="账号"
                         prop="account"></el-table-column>
        <el-table-column label="用户名"
                         prop="name"> </el-table-column>
        <el-table-column label="身份"
                         prop="jobString"> </el-table-column>
        <el-table-column fixed="right"
                         label="修改信息/重置密码/删除"
                         width="190px">
          <template slot-scope="scope">
            <div class="edit_delete">
              <el-button circle
                         icon="el-icon-edit"
                         type="warning"
                         @click="editUser(scope.row)"></el-button>
              <el-button circle
                         icon="el-icon-key"
                         type="success"
                         @click="resetUser(scope.row)"></el-button>
              <el-button circle
                         icon="el-icon-delete"
                         type="danger"
                         @click="deleteUser(scope.row.userId)"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0; text-align: center">
      <el-pagination :current-page="page"
                     :total="total"
                     background
                     class="white-list-tool"
                     layout="total,prev, pager, next, jumper"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: mapState(["user", "term", "token"]),
  data () {
    return {
      options: [{
        value: '0',
        label: '教务员'
      }, {
        value: '1',
        label: '教师'
      }, {
        value: '2',
        label: '实验员'
      }],

      title: "",
      tableData: [],
      total: 0,
      page: 1,
      centerDialogVisible: false,
      insertOrUpdate: true,

      in_userName: "",
      in_userPassword: "",
      in_userAccount: "",
      in_userJob: "",

      to_name: "",
      to_job: "",
      to_account: "",
      multipleSelection: [],
    };
  },
  methods: {
    resetUser (row) {
      this.$http.put("/user", {
        userId: row.userId,
        account: row.account,
        name: row.name,
        password: "123456",
        job: row.job,
      }, { headers: { 'userId': this.token } }).then((res) => {
        if (!res.data.success) { this.$message(res.data.errorMsg) }
        else { this.$message("重置成功") }
      })
    },
    clearInput () {
      this.in_userName = ""
      this.in_userPassword = ""
      this.in_userAccount = ""
      this.in_userJob = ""
    },
    editUser (row) {
      this.title = "修改职工信息"
      this.clearInput()
      this.insertOrUpdate = false;
      this.in_userId = row.userId
      this.in_userAccount = row.account;
      this.in_userName = row.name;
      this.in_userPassword = row.password;
      this.in_userJob = row.jobString;
      this.centerDialogVisible = true;
    },
    insert () {
      this.centerDialogVisible = true
      this.insertOrUpdate = true
      this.title = "新增职工"
      this.clearInput()
    },
    async insertUser () {
      if (this.in_userJob === "教务员") {
        this.in_userJob = 0;
      } else if (this.in_userJob === "教师") {
        this.in_userJob = 1;
      } else if (this.in_userJob === "实验员") {
        this.in_userJob = 2;
      }
      if (this.insertOrUpdate === true) {
        await this.$http.post("/user", {
          name: this.in_userName,
          job: this.in_userJob,
        }, { headers: { 'userId': this.token } }).then((res) => {
          if (res.data.success === true) { this.$message("插入成功") }
          else { this.$message(res.data.errorMsg) }
        });
      }
      if (this.insertOrUpdate === false) {
        await this.$http.put("/user", {
          userId: this.in_userId,
          account: this.in_userAccount,
          name: this.in_userName,
          password: this.in_userPassword,
          job: this.in_userJob,
        }, { headers: { 'userId': this.token } }).then((res) => {
          if (res.data.success === true) { this.$message("修改成功") }
          else { this.$message(res.data.errorMsg) }
        })
      }
      this.centerDialogVisible = false;
      this.load();
    },

    HandleSelectChange (val) {
      this.multipleSelection = val;
    },
    async multipleDelete () {
      var id = this.multipleSelection.map((v) => v.userId);
      for (var i = 0; i < id.length; i++) {
        await this.$http.delete("/user/" + id[i], { headers: { 'userId': this.token } }).then((res) => {
          if (!res.data.success) { this.$message(res.data.errorMsg) }
          else { this.$message("批量删除成功") }
        });
      }
      this.load();
    },
    async deleteUser (id) {
      await this.$http.delete("/user/" + id, { headers: { 'userId': this.token } }).then((res) => {
        if (res.data.success) { this.$message("删除成功") }
        else { this.$message(res.data.errorMsg) }
      });
      this.load();
    },

    handleCurrentChange (page) {
      this.page = page;
      this.load();
    },
    load () {
      this.$http.post("/user/notStu", {
        name: this.to_name,
        account: this.to_account,
        job: this.to_job,
        page: this.page,
      }).then((res) => {
        if (res.data.success === true) { }
        else { this.$message(res.data.errorMsg) }
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
  },
  created () {
    this.load();
  },
};
</script>


<style scoped>
::v-deep .el-dialog {
  background-color: #525151;
  border: 1px solid darkorange;
}

::v-deep .el-dialog__title {
  color: darkorange;
  caret-color: transparent;
}

.input3 /deep/ .el-input__inner {
  margin-right: 5px;
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
}

.input /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 100px;
}

.botton {
  color: darkorange;
  background-color: #525151;
  border-color: darkorange;
}

.botton:hover,
.botton:focus {
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.big {
  border: 1px solid darkorange;
}

::v-deep .el-table th {
  border: 1px solid darkorange !important;
  border-right: none !important;
  border-bottom: none !important;
  background-color: #525151;
}

::v-deep.el-table thead {
  color: darkorange;
  font-weight: 500;
  border: 1px solid darkorange;
}

::v-deep .el-table tr {
  background-color: #525151;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border: 1px solid darkorange;
  border-right: none !important;
}

::v-deep .el-table::before {
  border: 1px solid darkorange;
  height: 0;
}

::v-deep .el-table td,
.el-table th {
  text-align: center;
}

.el-input {
  width: 100px;
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid darkorange;
  margin: 0 auto;
  font-size: 15px;
}
</style>